<template>
  <div>
    <span class="rich-text-viewer" v-html="props.viewHtml"></span>
    <!-- 图片预览 -->
    <el-image-viewer v-if="showImageViewer" :url-list="[url]" @close="close" />
  </div>
</template>
<script setup>
const props = defineProps({
  viewHtml: {
    type: String,
    default: '',
  },
  index: {
    type: Number,
    default: 0,
  },
})
const showImageViewer = ref(false)
const url = ref('')
function close() {
  showImageViewer.value = false
}
watch(
  () => props.viewHtml,
  (val) => {
    if (val) {
      nextTick(() => {
        // 获取富文本内容子集标签
        const htmlChild = document.getElementsByClassName('rich-text-viewer')[props.index]?.children
        if (htmlChild) {
          // 循环子集标签获取到img元素
          for (let i = 0; i < htmlChild.length; i++) {
            let childNodeName = []
            htmlChild[i].querySelectorAll('*').forEach((element) => {
              childNodeName.push(element.tagName.toLowerCase())
            })
            if (childNodeName.includes('img')) {
              //给img标签添加div遮罩 并且添加点击放大事件
              const imgMask = document.createElement('div')
              imgMask.className = 'img-mask'
              // 给遮罩添加图标
              const imgIcon = document.createElement('img')
              imgIcon.src = require('@/assets/image/task/img-add-size.png')
              imgIcon.style.height = '25px'
              imgIcon.style.width = '25px'
              imgMask.style.display = 'none'
              imgMask.appendChild(imgIcon)
              for (let e = 0; e < htmlChild[i].children.length; e++) {
                if (htmlChild[i].children[e].tagName.toLowerCase() === 'img') {
                  htmlChild[i].children[e].className = 'img-content'
                  htmlChild[i].children[e].onmouseover = function () {
                    imgMask.style.display = 'flex'
                    imgMask.style.transform = `translate(
                    ${htmlChild[i].children[e].offsetLeft}px,
                    ${htmlChild[i].children[e].offsetTop}px
                  )`
                    imgMask.onclick = function () {
                      url.value = htmlChild[i].children[e].src
                      showImageViewer.value = true
                    }
                  }
                }
              }
              htmlChild[i].appendChild(imgMask)
              htmlChild[i].className = 'img'
            }
          }
        }
      })
    }
  },
  { immediate: true }
)
</script>
<style lang="scss" scoped>
.rich-text-viewer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  :deep(p) {
    width: 100%;
    word-break: break-all;
  }
  :deep(.img) {
    position: relative;
  }
  :deep(.img-content) {
    cursor: pointer;
    height: 100px;
    width: 100px;
    margin: 10px;
    border-radius: 8px;
  }
  :deep(.img-mask) {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.303);
    border-radius: 8px;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :deep(.img-mask:hover) {
    opacity: 1;
    transition: opacity 0.3s;
  }
  :deep(img) {
    max-width: 100%;
  }
}
</style>
